<template>
    <div>
        <div class="head" :key="userName">
            <img :src="img" alt="">
            <div class="nameBox">
                <span class="head1">{{ userName }}</span>
                <!-- 账号名字 -->
                <span class="head2">{{ role }}</span>
                <!-- 权限 -->
            </div>
        </div>
        
        <div class="xian">1</div><!-- 分割线 -->


        <el-row class="tac">
            <el-col :span="12">
                <el-menu class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router unique-opened
                    :default-active="defaultActive" @select="changeSelect">
                    <el-menu-item index="/Disease" v-if="userAuthority == 'city'">
                        <el-icon><span class="iconfont">&#xe8ff</span></el-icon>
                        <span>总览</span>
                    </el-menu-item>
                    <el-menu-item index="/AllView" v-if="userAuthority == 'district' && userPower('/overview') == true">
                        <el-icon><span class="iconfont">&#xe8ff</span></el-icon>
                        <span>总览</span>
                    </el-menu-item>
                    <el-menu-item index="/Institutional" v-if="userAuthority == 'city' ">
                        <el-icon><span class="iconfont">&#xe64a</span></el-icon>
                        <span>机构管理</span>
                    </el-menu-item>
                    <el-sub-menu index="2" v-if="userAuthority == 'district'">
                        <template #title>
                            <el-icon>
                                <span class="iconfont">&#xe62d</span>
                            </el-icon>
                            <span>流调管理</span>
                        </template>
                        <el-menu-item index="/ConfirmedCase" v-if="userPower('/patient') == true">确诊病例管理</el-menu-item>
                        <el-menu-item index="/ManagementOfConfidentialPersonnel" v-if="userPower('/cryptographer') == true">密接人员管理</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/zh" v-if="userAuthority == 'district' && userPower('/command') == true ">
                        <el-icon>
                            <span class="iconfont">&#xe681</span>
                        </el-icon>
                        <span>指挥调度</span>
                    </el-menu-item>
                    <el-menu-item index="/AnomalyAlerts" v-if="userAuthority == 'district' && userPower('/abnormalWarning') == true">
                        <el-icon>
                            <span class="iconfont">&#xe605</span>
                        </el-icon>
                        <span>异常预警</span>
                        <!-- <span>{{ yi }}</span> 动态参数 -->
                    </el-menu-item>
                    <el-sub-menu index="5" v-if="userAuthority == 'district'">
                        <template #title>
                            <el-icon>
                                <span class="iconfont">&#xe618</span>
                            </el-icon>
                            <span>居家检测</span>
                        </template>
                        <el-menu-item index="/meir" class="-menu" v-if="userPower('/dailyAgent') == true">
                            每日待办
                        </el-menu-item>
                        <el-menu-item index="/meix" class="-menu" v-if="userPower('/dailyAddition') == true">
                            每日新增
                        </el-menu-item>
                        <el-menu-item index="/meiy" class="-menu" v-if="userPower('/diurnalAnomaly') == true">
                            每日异常
                        </el-menu-item>
                        <el-menu-item index="/meij" class="-menu" v-if="userPower('/homeMonitoring') == true">
                            居家检测
                        </el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/notice" v-if="userAuthority == 'district' && userPower('/notice') == true">
                        <el-icon>
                            <span class="iconfont">&#xebca</span>
                        </el-icon>
                        <span>通知公告</span>
                    </el-menu-item>
                    <el-sub-menu index="7" v-if="userAuthority == 'district'">
                        <template #title>
                            <el-icon>
                                <span class="iconfont">&#xe6c7</span>
                            </el-icon>
                            <span>统计分析</span>
                        </template>
                        <el-menu-item index="/InformationStatistics" class="-menu" v-if="userPower('/infoRegStatistics') == true">信息登记统计表</el-menu-item>
                        <el-menu-item index="/CloseContacts" class="-menu" v-if="userPower('/closeContactAnalysis') == true">密接人群分析表</el-menu-item>
                        <el-menu-item index="/AbnormalPeople" class="-menu" v-if="userPower('/abWarningStatistics') == true">异常预警统计表</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="8" v-if="userAuthority == 'district'">
                        <template #title>
                            <el-icon>
                                <span class="iconfont">&#xe70f</span>
                            </el-icon>
                            <span>设置</span>
                        </template>
                        <el-menu-item index="/zuzhiguanli" class="-menu" v-if="userPower('/districtOrganization') == true">组织管理</el-menu-item>
                        <el-menu-item index="/zhanghaoguanli" class="-menu" v-if="userPower('/districtUser') == true">账号管理</el-menu-item>
                        <el-menu-item index="/jueseguanli" class="-menu"  v-if="userPower('/role') == true">角色管理</el-menu-item>
                        <el-menu-item index="/xitongrizhi" class="-menu"  v-if="userPower('/log') == true">系统日志</el-menu-item>
                        <el-menu-item index="/shujuzidian" class="-menu" v-if="userPower('/dataDictionary') == true">数据字典管理</el-menu-item>
                        <el-menu-item index="/xitongshezhi" class="-menu">系统设置</el-menu-item>
                    </el-sub-menu>
                </el-menu>

            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeMount, reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
// import {
//     Document,
//     Menu as IconMenu,
//     Location,
//     Setting,
// } from '@element-plus/icons-vue' //引入ui框架
export default defineComponent({
    name: "mynav",
    setup() {
        const homeInspection=ref(true)
        

        const store = useStore()
        const router = useRouter()

        const handleOpen = (key: string, keyPath: string[]) => {
            // console.log(key, keyPath)
        }
        const handleClose = (key: string, keyPath: string[]) => {
            // console.log(key, keyPath)
        }
        
        const yi = "--3" //异常预警后面的动态参数

        const state = reactive({
            defaultActive: ref(''),
            userAuthority: ref('')
        })

        const changeSelect = (path:any) => {
            state.defaultActive = path
            
            
        }

        let userName = ref();// 账号名字 
        let role = ref(); //类型
        let img = ref();  //头像
        let authority = ref(); // 权限

        onBeforeMount(() => {
            if (localStorage.getItem('userAuthority') == 'city') {
                state.userAuthority = 'city'
                state.defaultActive = '/Disease'
            } else {
                state.userAuthority = 'district'
                state.defaultActive = '/AllView'
            }
            //挂载账户姓名
            if (localStorage.getItem('userName') != '') {
                userName.value = localStorage.getItem('userName')
            }
            //挂载账号类型
            if (localStorage.getItem('role') != '') {
                role.value = localStorage.getItem('role');
            }
            //挂载账号头像
            if (localStorage.getItem('headPortrait') != '') {
                img.value = localStorage.getItem('headPortrait');
            }
            // 权限
            if(localStorage.getItem('authority') != ''){
                authority.value = localStorage.getItem('authority')
            }
        })
        
        const userPower = (data:any) => {
            let theAuthority = JSON.parse(authority.value)
            let isTrue = false
            theAuthority.forEach(item=>{
                if(item == data){
                    isTrue = true
                }
            })
            return isTrue
        }

        return {
            homeInspection,
            handleOpen,
            handleClose,
            yi,
            ...toRefs(state),
            changeSelect,
            userName,
            role,
            img,
            userPower
        }
    }
})


</script>
<style scoped lang="less">
a {
    text-decoration: none;
}

.el-menu-vertical-demo {
    width: 100%;
    /* Overflow:auto */
}

.el-col-12 {
    max-width: 220px !important;
    flex: 0 0 100%
}

.-menu {
    padding-left: 50px !important;
}

.head {
    border-right: 1px solid #dcdfe6;
    height: 88px;
    // position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        // position: absolute;
        // top: 30px;
        // left: 40px
    }
}

.nameBox {
    width: 130px;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-left: 10px;
}

/* 账号名字 */
.head1 {
    color: #b5b5b5;
    font-size: 13px;
    // position: relative;
    // top: 30px;
    // left: 106px
}

/* 权限 */
.head2 {
    font-size: 11px;
    // position: relative;
    // top: 50px;
    // left: 80px
}

/* 分割线 */
.xian {
    width: 220px;
    height: 1px;
    background-color: #f2f2f2;
    position: flex;
    top: 20px;
    flex: 5
}
</style>